<template>
  <div>
    <div class="m-2">
      <ElButton @click="[(code = 'submit'), (visviableDialog = true)]">添加用户</ElButton>
    </div>
    user
    <el-scrollbar height="calc(100vh - 101px)">
      <ElTable :data="pageData.list" class="w-[100%]">
        <ElTableColumn prop="id" label="ID" width="80px"  align="center"></ElTableColumn>
        <ElTableColumn prop="account" label="账号"  align="center"></ElTableColumn>
        <ElTableColumn prop="email" label="邮箱"  align="center">
          <template #default="{ row }">
            {{ row.email ? row.email : '暂无邮箱' }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="introduction " label="账号介绍"  align="center">
          <template #default="{ row }">
            {{ row.introduction ? row.introduction : '暂无邮箱' }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="introduction " width="250" label="账号角色"  align="center">
          <template #default="{ row }">
            <ElSelect
              v-model="row.role"
              multiple
              :max-collapse-tags="2"
              collapse-tags
              class="w-full"
              disabled
            >
              <ElOption
                v-for="item in rolelist"
                :key="item.id"
                :label="item.name"
                :value="item.roleKey"
                readonly
                disabled
              ></ElOption>
            </ElSelect>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="status" label="账号状态"  align="center">
          <template #default="{ row }">
            <el-tag v-if="row.status" type="success" @click="toggleDisable(row)">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" align="center">
          <template #default="{ row }" >
            <ElButton @click="[(visviableDialog = true), (formData = row), (code = 'change')]"
              >编辑</ElButton
            >
            <ElButton type="danger" @click="deleteuser(row.id)">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        :current-page="pageData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        class="mt-2 float-right mr-5"
        @size-change="sizeChange"
        @current-change="currentChange"
      ></ElPagination>
    </el-scrollbar>
    <!-- 添加修改用户弹窗 -->
    <ElDialog v-model="visviableDialog" :title="code == 'submit' ? '添加用户' : '编辑用户'">
      <ElForm v-model="formData">
        <ElFormItem label="账号">
          <ElInput v-model="formData.account" />
        </ElFormItem>
        <ElFormItem label="密码">
          <ElInput v-model="formData.password" show-password />
        </ElFormItem>
        <ElFormItem label="邮箱">
          <ElInput v-model="formData.email" />
        </ElFormItem>
        <ElFormItem label="账号介绍">
          <ElInput v-model="formData.introduction" />
        </ElFormItem>
        <ElFormItem label="账号角色">
          <ElSelect
            v-model="formData.role"
            class="w-full"
            multiple
            remote
            filterable
            placeholder="Select"
            :remote-method="selctRomote"
          >
            <ElOption
              v-for="item in rolelist"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </ElSelect>
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton @click="visviableDialog = false">取消</ElButton>
        <ElButton type="primary" @click="submit">提交</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup>
const useApi = useUserApi()
const rolelist = ref([])
const code = ref('')
//用户列表
const pageData = ref({
  list: [],
  total: 0,
  page: 1,
  pageSize: 10
})
//弹出框
const visviableDialog = ref(false)
//表单绑定
const formData = ref({})
//提交添加用户
const submit = () => {
  if (code.value == 'submit') {
    useApi.createUser(formData.value).then(() => {
      visviableDialog.value = false
      getUserList()
      successElMessageBox('提交成功')
    })
  } else {
    useApi.updateUser(formData.value).then(() => {
      visviableDialog.value = false
      getUserList()
      successElMessageBox('修改成功')
    })
  }
}
onMounted(() => {
  getUserList()
})

//获取角色列表
useApi.getRoleList().then((res) => {
  rolelist.value = res.rows
})
//搜索用户列表
const selctRomote = (query) => {
  // console.log(query)
  if (query) {
    rolelist.value = ''
    useApi.getRoleList({ name: query }).then((res) => {
      // console.log(res)
      rolelist.value = res.rows
    })
  } else {
    useApi.getRoleList().then((res) => {
      rolelist.value = res.rows
    })
  }
}
//分页
const sizeChange = (val) => {
  pageData.value.pageSize = val
  getUserList()
}
const currentChange = (val) => {
  pageData.value.page = val
  getUserList()
}
//删除用户
const deleteuser = (id) => {
  ElMessageBox.confirm('是否确认删除', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      useApi.deleteUser(id).then(() => {
        getUserList()
        successElMessageBox('删除成功')
      })
    })
    .catch(() => {
      errorElMessageBox()
    })
}
//更改用户状态
const toggleDisable = (row) => {
  // console.log(row.status)
  if (row.status) {
    ElMessageBox.confirm('是否锁定该用户', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        useApi.lockUser(row.id).then(() => {
          getUserList()
          successElMessageBox('锁定成功')
        })
      })
      .catch(() => {
        errorElMessageBox()
      })
  } else {
    ElMessageBox.confirm('是否启用该用户', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {})
      .catch(() => {
        errorElMessageBox()
      })
  }
}

//获取用户列表
const getUserList = () => {
  useApi
    .getUserList({
      page: pageData.value.page,
      limit: pageData.value.pageSize
    })
    .then((res) => {
      // console.log(res.count)
      pageData.value.list = res.rows
      pageData.value.total = res.count
    })
}
//发送弹框
const errorElMessageBox = () => {
  ElMessage({
    type: 'error',
    message: '已取消'
  })
}
const successElMessageBox = (res) => {
  ElMessage({
    type: 'success',
    message: res
  })
}
</script>

<style lang="scss" scoped></style>
